<template>
  <div>
    <!-- 径路查询 2018/8/15 zhangQ -->
    <Row>
      <i-col>
        <Form ref="routerQueryParam" :model="routerQueryParam" label-position="right" inline>
          <Row>
            <i-col>
              <FormItem label="发站">
                <Select v-model="routerQueryParam.startStation" clearable placeholder="请选择发站" style="width: 200px">
                  <template v-for="item in stationPositionList">
                    <Option :value="item">{{ item }}</Option>
                  </template>
                </Select>
              </FormItem>
              <FormItem label="到站">
                <Select v-model="routerQueryParam.endStation" clearable placeholder="请选择到站" style="width: 200px">
                  <template v-for="item in stationPositionList">
                    <Option :value="item">{{ item }}</Option>
                  </template>
                </Select>
              </FormItem>
              <FormItem style="float:right;">
                <Button type="primary" @click="routerQuerySearch" icon="ios-search">
                  搜索
                </Button>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </i-col>
    </Row>
    <tablePage ref="routerQueryPageRef" :api="getWayContainersList" :param="routerQueryParam">
      <template slot-scope="props">
        <Table ref="routerQueryTabRef" :columns="routerQueryObj.columns" :data="props.data"></Table>
      </template>
    </tablePage>

    <xlinkModal v-model="operaModal.containerDetailShow" title="集装箱详情" width="960">
      <containerDetails :routerQueryInfo="routerQueryInfo" v-if="operaModal.containerDetailShow"></containerDetails>
    </xlinkModal>
  </div>
</template>

<script>
  import xlinkModal from '@components/modal/xlinkModal'
  import tablePage from '@components/table/tablePage.vue'
  import { getContainersPositionList, getWayContainersList } from '@api/containerPlatform/containerManagement'
  import containerDetails from './containerDetails'

  export default {
    name: 'routerQuery',
    data () {
      let tabs = '1'
      let operaModal = { containerDetailShow: false }
      let routerQueryInfo = null
      let routerQueryObj = {
        columns: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '发站',
            key: 'sendStationName',
            width: 200
          },
          {
            title: '到站',
            key: 'endStationName',
            width: 200
          },
          {
            title: '车数',
            key: 'trainNumber',
            width: 200
          },
          {
            title: '在途箱数',
            key: 'containerNumber',
            width: 200
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            minWidth: 200,
            fixed: 'right',
            render: (h, params) => {
              return (<i-button type="dashed" onClick={() => this.containerDetailsOpen(params.row)}>集装箱箱情</i-button>)
              // return h('div', [
              //   h('Button', {
              //     props: {
              //       type: 'error',
              //       size: 'small'
              //     },
              //     on: {
              //       click: () => {
              //         let id = params.row.id
              //         this.dataDelete(id)
              //       }
              //     }
              //   }, '删除')
              // ])
            }
          }
        ]
      }
      let routerQueryParam = { startStation: '', endStation: '' }
      // let containerStateList = [{ id: 1, state: '运输中' }, { id: 2, state: '站内' }]
      let stationPositionList = []
      let datas = { stationPositionList, routerQueryParam, routerQueryObj, tabs, getWayContainersList, operaModal, routerQueryInfo }
      return datas
    },
    computed: {},
    watch: {
      'operaModal.containerDetailShow' (val, oldval) {
        if (!val) {
          this.routerQueryInfo = null
        }
      }
    },
    methods: {
      containerDetailsOpen (row) {
        this.routerQueryInfo = row
        this.operaModal.containerDetailShow = true
      },
      /**
       * TODO(路由搜索)
       * @auther zhangQ
       * @date 2018/8/15 1:57
       */
      routerQuerySearch () {
        this.$refs['routerQueryPageRef'].dataRefresh(this.routerQueryParam)
      },
      getData () {
        let param = {
          isAll: 1
        }
        getContainersPositionList(param).then(res => {
          if (res.data.isSuccess === 1) {
            this.stationPositionList = res.data.data
          }
        })
        // getContainersTypeList()
        //   .then(res => {
        //     if (res.data.isSuccess === 1) {
        //       this.containerTypeList = res.data.data
        //     }
        //   })
      }
    },
    created () {
    },
    mounted () {
      this.getData()
    },
    components: { tablePage, xlinkModal, containerDetails }
  }
</script>

<style scoped>

</style>
